<script setup >
import {
  useGepDataStore
} from "@/stores/gep";
import {storeToRefs} from "pinia";
import Gep25Dmap from "@/views/gepComponent/gep25Dmap.vue";
import GepD4RegionYear from "@/views/gepDev4/gepD4RegionYear.vue";
const gepDataStore = useGepDataStore();
const {
  isSubmitted,
} = storeToRefs(gepDataStore);
import { ref,onUnmounted,onMounted, nextTick } from 'vue';

// 使用 ref 来定义响应式变量
const updateKey = ref(1);
const box = ref(null);

// 在页面加载完成后更新 updateKey 的值
const element = document.getElementById('myElement');
// console.log(element); // 检查 element 是否是一个有效的 DOM 元素
// if (element) {
//   const computedStyle = getComputedStyle(element);
//   console.log('Width:', computedStyle.width);
//   console.log('Height:', computedStyle.height);
// } else {
//   console.error('Element not found!');
// }
nextTick(() => {
  updateKey.value += 1;
  console.log(updateKey.value);

  // console.log(element); // 检查 element 是否是一个有效的 DOM 元素
  // if (element) {
  //   const computedStyle = getComputedStyle(element);
  //   console.log('Width:', computedStyle.width);
  //   console.log('Height:', computedStyle.height);
  // } else {
  //   console.error('Element not found!');
  // }


});
// 使用 ResizeObserver 监听元素尺寸变化

</script>

<template>
  <!--    最外层layer1  左半部分 -->
  <div class="gepD4-layer1-left" id="myElement">
    <div class="gepD4-layer2-left-top">
      <gep-d4-region-year />
    </div>

    <div class="gepD4-layer2-left-bottom" >

      <gep25-dmap class="gepD4-layer2-left-bottom-border" />
    </div>

  </div>
</template>

<style scoped>

.gepD4-layer2-left-top {
  height: 22%;
  /*border: 1px red solid;*/
}

.gepD4-layer2-left-bottom {
  flex: 1;
  width: calc(100% - 40px);
  height: calc(100% - 60px);
  margin: 20px 20px;

  background: linear-gradient(to left, #238da8, #238da8) left top no-repeat,
  linear-gradient(to bottom, #238da8, #238da8) left top no-repeat,
  linear-gradient(to left, #238da8, #238da8) right top no-repeat,
  linear-gradient(to bottom, #238da8, #238da8) right top no-repeat,
  linear-gradient(to left, #238da8, #238da8) left bottom no-repeat,
  linear-gradient(to bottom, #238da8, #238da8) left bottom no-repeat,
  linear-gradient(to left, #238da8, #238da8) right bottom no-repeat,
  linear-gradient(to left, #238da8, #238da8) right bottom no-repeat;
  background-size: 3px 15px, 15px 3px, 3px 15px, 15px 3px;
  border: 2px solid rgba(179, 172, 172, 0.2); /* 外边框 */
  box-shadow: inset 0 0 28px rgba(179, 172, 172, 0.4); /* 边框内部的光效 */
}

.gepD4-layer2-left-bottom-border {

  width: calc(100% - 40px);
  height: calc(100% - 60px);
}






</style>
